<template>
  <div
    v-if="show"
    class="fixed w-full h-full z-10 left-0 top-0 bg-mask-5 flex items-center justify-center"
  >
    <div class="w-450px">
      <div
        class="py-42px pl-46px text-30px font-medium flex flex-col"
        style="background: #393939; color: #edcd9a"
      >
        <div>恭喜您</div>
        <div class="mt-10px">成为尊贵的{{ props.name }}</div>
      </div>
      <div
        class="py-40px flex justify-center"
        style="background: linear-gradient(200.74deg, #f4d9aa 44.89%, #e0b97e 91.63%)"
      >
        <div
          class="w-249px h-62px text-center leading-62px rounded-9px cursor-pointer text-22px"
          style="background: linear-gradient(90deg, #49413b 9.9%, #1e1e1c 100%); color: #edcd9a"
          @click="golevel"
        >
          开启{{ props.name }}之旅
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'

const props = defineProps({
  name: String,
  value: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['update:value'])
const router = useRouter()
const show = computed({
  get: () => props.value,
  set: (v) => {
    emits('update:value', v)
  }
})

const golevel = () => {
  router.replace({ name: 'Recommend' })
}
</script>

<style scoped></style>
